<template>

    <!--搜索键盘-->
    <div>
        <el-dialog class="search-keyboard-dialog"  v-model="visible" :title="title" @opened="dialogOpened">
        <slot></slot>
        <el-input v-model="keywords" style="margin-bottom: 10px;" />

        <div id="search-keyboard" :class="keyboardContainerClass">
          
        </div>
    </el-dialog>
    </div>


</template>
<script setup lang='ts'>
// @ts-nocheck
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'

import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'


const props = withDefaults(defineProps<{ modelValue: boolean, title?: string,keyboardContainerClass:string }>(), {
    title: '请输入商品名称首字母搜索'
})

const emit = defineEmits(['onChange', 'onKeyPress', 'update:modelValue', 'onSubmit'])
const visible = ref(props.modelValue)
let keyboard: any = null

let keywords = ref('')


function dialogOpened() { //Dialog 打开动画结束时的回调
    initKeyboard()
    //设置初始值
    keyboard && keyboard.setInput(keywords.value)
}
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (!newVal) {
        keyboard.clearInput()
        keywords.value = ''
        if (keyboard) {
            keyboard.destroy();
            keyboard = null
            //console.log(keyboard)
           
        }
    }

})
watch(() => visible.value, (newVal) => {
    emit('update:modelValue', newVal)
})


const onKeyPress = (button) => {
    let input = keyboard.getInput()
    // if (button === '{bksp}') { //回退 不需要单独设置keyboard 的input值  会自动执行onChange 方法
    //     // const currentInput = input;
    //     // console.log(currentInput)
    //     // keyboard.setInput((currentInput + '').slice(0, -1))
    //     // console.log((currentInput + '').slice(0, -1))
    //     console.log(keyboard.getInput())
    // }
    if (button === '{clear}') {//清空
        keyboard.setInput('')
    }
    if (button === '{confirm}') {//确认
        emit('update:modelValue', false)
    }
    emit('onKeyPress', button)
}
const onChange = (input) => {
    // console.log('onchange~', input)
    keywords.value = input
    emit('onChange', input)

}


//组件解绑之前 销毁keyboard实例，避免内存泄漏
onBeforeUnmount(() => {
    // console.log('onBeforeUnmount')
    if (keyboard) {
        keyboard.destroy();
        keyboard = null
    }
})

//初始化keyboard
function initKeyboard() {

    let defaultLayout = [
        '1 2 3 4 5 6 7 8 9 0',
        'q w e r t y u i o p',
        'a s d f g h j k l {bksp}',
        'z x c v b n m {confirm}',

    ]

    // console.log(defaultLayout)
    const options = {
        onChange,
        onKeyPress,
        layout: {
            default: defaultLayout,
        },
        display: {
            '{bksp}': '⌫',
            '{clear}': '清空',
            '{confirm}': '收起键盘',
            '{zf}': '+/-'
        },
        them:'search-keyboard'
      
    }

    keyboard = new Keyboard(`${props.keyboardContainerClass}`, options)
}





</script>

<style lang='scss' scoped>
:deep(.search-keyboard-dialog) {
    position: absolute !important;
    right: 13px !important;
    bottom: 13px;
    margin: 0 !important;
    --el-dialog-width: calc(70% - 25px);
}
#search-keyboard {
    :deep(.hg-button-bksp) {
        width: 20px;
        font-weight: bold !important;
        
    }

    :deep(.hg-button-confirm) {
        min-width: calc(30% - 3px);

        font-weight: bold !important;
        
    }

    :deep(.hg-button) {
        padding: 25px 5px;
        font-size: 20px;
    }

}
</style>
